import React, {Component} from 'react';
import {Row, Col, Card} from 'antd';
import './less/index.less'
import book from './../../assets/home/book.svg'
import movie from './../../assets/home/movie.svg'
import picture from './../../assets/home/pic.svg'
import user from './../../assets/home/user.svg'

export default class Home extends Component{
  render () {
    return (
      <div className='main-container'>
        <Row gutter={[24, 24]} justify={'center'}>
          <Col xs={22} sm={12} md={12} lg={12} xl={6}>
            <Card title="图书数量" className={'card'}>
              <div className='card-content'>
                <div className='content-img'
                     style={{
                       backgroundImage: `url(${book})`,
                     }}>
                </div>
                <h1 className='count'>6666</h1>
              </div>
              <div className='card-footer'>
                <span className='add'>今日新增 88</span>
              </div>
            </Card>
          </Col>
          <Col xs={22} sm={12} md={12} lg={12} xl={6}>
            <Card title='电影数量' className={'card'}>
              <div className='card-content'>
                <div className='content-img'
                     style={{
                       backgroundImage: `url(${movie})`,
                     }}>
                </div>
                <h1 className='count'>6666</h1>
              </div>
              <div className='card-footer'>
                <span className='add'>今日新增 88</span>
              </div>
            </Card>
          </Col>
          <Col xs={22} sm={12} md={12} lg={12} xl={6}>
            <Card title='图片数量' className={'card'}>
              <div className='card-content'>
                <div className='content-img'
                     style={{
                       backgroundImage: `url(${picture})`,
                     }}>
                </div>
                <h1 className='count'>6666</h1>
              </div>
              <div className='card-footer'>
                <span className='add'>今日新增 88</span>
              </div>
            </Card>
          </Col>
          <Col xs={22} sm={12} md={12} lg={12} xl={6}>
            <Card title='用户数量' className={'card'}>
              <div className='card-content'>
                <div className='content-img'
                     style={{
                       backgroundImage: `url(${user})`,
                     }}>
                </div>
                <h1 className='count'>6666</h1>
              </div>
              <div className='card-footer'>
                <span className='add'>今日新增 88</span>
              </div>
            </Card>
          </Col>
          <Col xs={22} sm={12} md={24} lg={24} xl={24}>
            <Card>
              <p>Card content</p>
              <p>Card content</p>
              <p>Card content</p>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}
